The eConstruct! Editor tag provides the familiar editing/formatting functionality that you've come to expect from WYSIWYG HTML or word processing editors. It offers all the basic formatting options such as bold, italics, underline, colors, and fonts, and it allows you to insert text, images, controls, or hyperlinks in a fast and intuitive fashion. Plus, like most current word processors, the component features text-searching along with unlimited undo/redo.

The component also provides flexible table editing. You can not only insert tables on the fly, but also dynamically modify existing table structures by adding, deleting, or merging table cells.

In addition to the editing/formatting capabilities described earlier, the component offers powerful WYSIWYG (absolute) positioning and resizing. Hence, you can drag any absolutely positioned element anywhere on the page and have it stick, and you can resize any element dynamically. Furthermore, you can specify where an element should fall in the z-order of the page. 

Besides all of these cool features, the component uses familiar techniques for selection, drag and drop, and common text operations. If your users know how to use a word processor, chances are they already know how to use the eConstruct! Editor component.

SAMPLE ONE TAG IMPLEMENTATION:  This example uses CFFILE to read content from an html document.  Image file upload, directory creation/deletion and file delete are disabled for demo purposes.

<cf_eConstruct_editor
  editorName="demo"
  formname="sampleForm"
  documentBaseURL="http://www.mysampledomain.com/econstructEditor/sample/"
  documentPath="c:\inetpub\wwwroot\mysampledomain\econstructEditor\sample\"
  imageSource="images"
  filename="index.htm"
  omitToolbar=""
  allowImageFileUpload="no"
  allowImageDelete="no"
  editorWidth="600"
  editorHeight="350"
  allowEditSource="yes">

View Sample One Demo

SAMPLE TWO TAG IMPLEMENTATION:  This example uses CFQUERY to read content from a database.  Image file upload, directory creation/deletion and file delete are disabled for demo purposes.  The 'editorName' attribute must be the same name as the textarea fieldname.

<cfquery name="myContent" datasource="db_example" dbtype="ODBC">
select contentID, sampleContent from sampleTable where contentID = 1
</cfquery>

<form action="mydemosave_sample1.cfm" method="post" name="sampleForm" id="sampleForm" onsubmit="saveIt()">

<cfoutput query="myContent">
<input type="hidden" name="contentID" value="#contentID#">

<textarea cols="" rows="" name="MyEditorName" style="display: none">
#sampleContent#
</textarea>
</cfoutput>

<cf_eConstruct_editor
  editorName="MyEditorName"
  formname="sampleForm"
  documentBaseURL="http://www.mysampledomain.com/acseditor_formfield/sample/"
  documentPath="c:\inetpub\wwwroot\mysampledomain\acseditor_formfield\sample\"
  imageSource="images"
  omitToolbar=""
  allowImageFileUpload="yes"
  allowImageDelete="no"
  allowMakeFolder="no"
  allowRemoveFolder="no"
  editorWidth="600"
  editorHeight="350"
  allowEditSource="yes"
  baseFont="Verdana"
  baseFontSize="2"
  baseFontColor="000000"
  baseBGColor="FFFFFF">
 
  <div align="center"><input type="submit" name="Submit" value="Save"></div>
 
 </form>